<template>
    <div class="classify-box">
        <!-- 客户分类 -->
        <serchForm :Form="clientForm" :FormLabel="clientFormLabel" @onSearch="onSearch" />
        <div class="function-box" v-if="checkPermi(['system:customer:edit'])">
            <el-button class="reviseBtn" @click="updateCustomer"><i class="iconfont icon-xiugai"></i>
                修改
            </el-button>
            <el-button class="exportBtn" @click="deleteCustomerFn"><i class="iconfont icon-shanchu"></i>
                删除
            </el-button>
         
        </div>
        <forTableCom :color="color" :idActive="idActive" :bg="bg" :total="totals" :page="pageNum" :limit="pageSize"
            @handleSelectionChange="handleSelectionChange" @handleChange="handleChange" @updatePage="updatePage"
            @updateLimit="updateLimit" :tableHeaderData="clientTableHeaderData" @handleEdit="handleEdit"
            @handleDelete="handleDelete" :tableData="clientTableData" :operate="operate" />
        <addManage v-if="flag" @closePopUps="closePopUps" :defindPopData="defindPopData" :popTitle="popTitle"
            @getCustomerData="getCustomerData" :classifyFlag="classifyFlag" />
    </div>
</template>
<script setup>
const { proxy } = getCurrentInstance();
import serchForm from '@/components/inventory/serchForm.vue';
import forTableCom from '@/components/forTableCom/index.vue';
import { selectCustomerApi,deleteCustomer } from '@/api/customer'
import addManage from './components/addManage';
import visitCom from './components/visitCom'
import { ref } from 'vue';
import {updatePopHook} from '@/hook/setPop/updatePop.js'
const updatePop = updatePopHook()
import { getApiDataRules } from '@/hook/getApiDataRules'
import { deletePopHook } from '@/hook/setPop/deletePop.js'
let deletePop = deletePopHook()
const { apiRulesRows } = getApiDataRules()
import { checkPermi } from "@/utils/permission.js";
const idActive = 'customerId'
// 显示操作栏
const operate = ref(false)
// 显示新增弹窗
let flag = ref(false)
// 显示操作栏
let popTitle = ref('新增')
// 存放弹窗数据
let defindPopData = ref({})
// 修改客户flag
let classifyFlag = ref(true)

// 表单绑定属性名
let clientForm = ref(
    {
        customerId: '',    // 客户编号
        customerName: '',    // 客户名称
        customerType: '',    // 客户类型
        customerRank: '',      // 客户等级
    }
)
// 表单数据标题
let clientFormLabel = ref([
    {
        name: 'customerId',
        label: '客户编号'
    },
    {
        name: 'customerName',
        label: '客户名称',
    },
    {
        name: 'customerType',
        label: '客户类型',
    },
    {
        name: 'customerRank',
        label: '客户等级',
        type: 'select',
        client: [
            {
                label: 'A核心客户',
                value: 'A核心客户'
            },
            {
                label: 'B高级客户',
                value: 'B高级客户'
            },
            {
                label: 'C中级客户',
                value: 'C中级客户'
            },
            {
                label: 'D普通客户',
                value: 'D普通客户'
            },
            {
                label: 'E低价值客户',
                value: 'E低价值客户'
            },
            {
                label: 'F散户',
                value: 'F散户'
            },
        ]
    },
])
// 查找
const onSearch = (v) => {
    // 每次查询后回到页1
    pageNum.value = 1
    getCustomerData(v)
}
// 表格
let color = ref('#333')
let bg = ref('#d9d9d93b')
let totals = ref(50)
// 当前页数
let pageNum = ref(1)
// 条数
let pageSize = ref(50)
// 存储勾选框的对象
let multipleSelection = ref([])

// 表格表头数据
let clientTableHeaderData = ref([
    {
        prop: 'customerId',
        label: '客户编号',
        colorClassName: 'activeColor',
    },
    {
        prop: 'customerName',
        label: '客户名称',
        colorClassName: 'activeColor',
    },
    {
        prop: 'customerType',
        label: '客户类型',
    },
    {
        prop: 'companyName',
        label: '服务公司',
    },
    {
        prop: 'customerSource',
        label: '客户来源',
    },
    {
        prop: 'customerContacts',
        label: '客户联系人',
    },
    {
        prop: 'customerRank',
        label: '客户等级',
    },
    {
        prop: 'accountsStatus',
        label: '账款状态'
    },
])
// 表格数据内容
let clientTableData = ref([])


// 选中的列
const handleSelectionChange = (v) => {
    multipleSelection.value = v
    console.log(v);
}

// 分页器大小  当前分页器
const handleChange = (v) => {
    let { page, limit } = v.page
    pageNum.value = page
    pageSize.value = limit
    getCustomerData(clientForm.value)
}
// 当前页面位置发生变化
const updatePage = (v) => {
    console.log(v);
}
// 条目个数发生变化
const updateLimit = (v) => {
    console.log(v);
}
// 编辑
const handleEdit = (props) => {
    let { i, v } = props
    console.log('编辑', i, v);
}
// 删除
const handleDelete = (props) => {
    let { i, v } = props
    console.log('删除', i, v);
}
// 删除客户
const deleteCustomerFn = () => {
    let fn = async () => {
        let params = {
            id: multipleSelection.value[0].customerId
        }
        let res = await deleteCustomer(params)
        let { code, msg } = res
        if (code == 200) {
            getCustomerData()
            proxy.$modal.msgSuccess(msg);
        }
    }
    deletePop(multipleSelection, fn)
}
// 修改
const updateCustomer = () => {
    updatePop(multipleSelection, flag, popTitle, '修改等级', false, defindPopData)
}
// 关闭弹窗
const closePopUps = () => {
    flag.value = false
}


// 请求客户
const getCustomerData = async (data = '') => {
    let data1 = {
        pageNum: pageNum.value,
        pageSize: pageSize.value,
    }
    let params = Object.assign(data1, data)
    let res = await selectCustomerApi(params)
    let { rows, total } = apiRulesRows(res)
    clientTableData.value = rows
    totals.value = total
}
onMounted(() => {
    getCustomerData()
})
</script>
<style scoped lang='scss'>
.classify-box {
    padding: 16px;

    .function-box {
        display: flex;
        align-items: center;
    }
}
</style>
